import React, { Component } from 'react'
import { Input, Button, Form, Row, Col, notification } from 'antd';
import styled from 'styled-components';
import { connect } from 'dva'
import Link from 'umi/link';
import { CurrentPage } from '../../model'

const MyForm = styled(Form)`
    width: 50vw;
    min-height: 630px;
    min-width: 940px;
`
const NumberCount = styled.p`
    position: absolute;
    bottom: -20px;
    right: 20px;
    background-color: transparent;
`

const MyLink = styled.div`
    background-color: 'red';
    margin-bottom: 20px;
    text-decoration-line: underline;
`

// const { dispatch, data } = this.props;
// dispatch({ type: 'archives_unit/queryDict', payload: { keyList: DICT } })
@connect(({ archives_unit, loading, upload }) => ({
	intro: archives_unit.basicIntro
}))
export class BasicInfo extends Component<any> {

	state = {
		infoLength: 0
	};


	onTextAreaChange = (e) => {
		const { dispatch, data } = this.props;
		let text = e.target.value;
		this.setState({
			infoLength: text.length
		});
		dispatch({ type: 'archives_unit/setBasicIntro', payload: text });
		dispatch({
			type: 'archives_unit/updateState', payload: {
				saveState: {
					needSave: true,
					currentPage: CurrentPage.First
				}
			}
		});
	}

	handleSubmit = () => {
		const { dispatch } = this.props;
		dispatch({ type: 'archives_unit/saveFirstPage' });
	}

	componentDidMount() {
		const { dispatch, data } = this.props;
		dispatch({ type: 'archives_unit/queryBasicIntro' })
	}

	render() {
		const { form, intro } = this.props;
		const { infoLength } = this.state;
		const FormItem = Form.Item;
		const { TextArea } = Input;
		const { getFieldDecorator } = form;


		const formItemLayout = {
			labelCol: {
				span: 4
			},
			wrapperCol: {
				span: 16
			},
		};

		return (
			<MyForm>
				<Row>
					<FormItem
						label="单位基本情况"
						{...formItemLayout}
					>
						<TextArea maxLength={4000} style={{
							height: '400px', resize: 'none',
							paddingBottom: '50px'
						}} placeholder='请输入基本情况'
							onChange={this.onTextAreaChange}
							value={intro}
						/>

						<NumberCount>{intro ? intro.length : 0}/4000</NumberCount>
					</FormItem>
				</Row >
				<Row>
					<Col span={4} />
					<Col span={16}>
						<Link to='/data/owner'><MyLink to='/data/build'>查看单位信息</MyLink></Link>
						<Link to='/data/build'><MyLink to='/data/build'>查看建筑信息</MyLink></Link>

					</Col>
				</Row>

				<Col span={4} style={{ display: 'flex', marginTop: 70, paddingRight: 15, justifyContent: 'flex-end' }}>
					<Button type="primary" onClick={() => { this.handleSubmit() }}>保 存</Button>
				</Col>
			</MyForm >
		)
	}



}

const BasicInfoPage = Form.create()(BasicInfo);
export default BasicInfoPage;
